<template>
  <card-box title="无人机调度总览">
    <div class="drone-info">
      <div class="drone-info-header">
        <div class="title">低空感知网络覆盖面积</div>
        <div class="desc">占全省{{ percentage }}</div>
      </div>
      <div class="counter">
        <div class="item" v-for="(item, index) in counterData" :key="index">{{ item }}</div>
        <div class="item">k</div>
        <div class="item">m²</div>
      </div>
      <div class="statis">
        <div class="item" v-for="(item, index) in statisData" :key="index">
          <div class="name">{{ item.name }}</div>
          <div class="value">{{ formatNumberWithCommas(item.value) }}<span class="unit">{{ item.unit }}</span></div>
        </div>
      </div>
    </div>
  </card-box>
</template>
<script>
import CommonMixin from '../mixin/CommonMixin';
import CardBox from './common/CardBox.vue';
export default {
  mixins: [CommonMixin],
  data() {
    return {
      code: 'DRONE',
      count: 0,
      percentage: 0,
      statisData: [
        { name: '已部署机库', key: 'deployed_drone_warehouses', value: 0, unit: '台' },
        { name: '机动队伍', key: 'mobile_teams', value: 0, unit: '组' },
      ]
    }
  },
  computed: {
    counterData() {
      const { count } = this
      let countStr = count + ''
      const csl = countStr.length
      const diff = 6 - csl
      if (diff > 0) {
        for (let i = 0; i < diff; i++) {
          countStr = '0' + countStr
        }
      }
      return (countStr).split('')
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    async init() {
      this.loading = true
      const res = await this.queryData(this.code)
      this.loading = false
      const dataResult = res.data.dataResult
      if(dataResult && dataResult.length > 0) {
        const data = dataResult[0]
        this.count = data.low_altitude_coverage_area
        this.percentage = data.coverage_percentage
        this.statisData = this.statisData.map(item => {
          item.value = data[item.key] || 0
          return item
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.drone-info {
  display: flex;
  flex-direction: column;
  height: tvh(248);
  padding: tvw(10);
  box-sizing: border-box;
  .drone-info-header {
    display: flex;
    align-items: center;
    margin-bottom: tvh(8);

    .title {
      font-size: tvw(16);
      color: #ffffff;
      margin-right: 16px;
    }

    .desc {
      font-size: tvw(14);
      color: #ffffff;
      background: rgba(3, 111, 194, 1);
      border: 1px solid rgba(74, 163, 255, 1);
      text-align: center;
      height: tvw(30);
      line-height: tvw(30);
      width: tvw(108);
    }
  }
  .counter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .item {
      width: tvw(43);
      height: tvh(65);
      display: flex;
      align-items: center;
      justify-content: center;
      background: url(~@/assets/images/yyzhkb/kb-number-bg.svg) center center no-repeat;
      background-size: cover;
      font-size: tvw(40);
      color: #ffffff;
    }
  }
  .statis {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-around;
    .item {
      display: flex;
      align-items: center;
      flex-direction: column;
      // justify-content: center;
      width: tvw(151);
      height: tvh(95);
      background: url(~@/assets/images/yyzhkb/kb-drone-item-bg.svg) center center no-repeat;
      background-size: cover;
      .name {
        font-size: tvw(18);
        color: #ffffff;
        margin-bottom: tvh(10);
      }
      .value {
        font-size: tvw(32);
        font-weight: bold;
        color: rgba(227, 233, 245, 1);
      }
      .unit {
        font-size: tvw(17);
        font-weight: normal;
      }
    }
  }
}
</style>